import React, { useState } from 'react'
import { Row, Col, Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'

import scss from './index.module.scss'

const Header = () => {
  const dispatch = useDispatch()
  const visible = useSelector((store) => store.aside.visible) ?? false

  function showRightAside() {
    dispatch({ type: 'setVisible', visible: !visible })
  }

  return (
    <Row justify="space-between" align="middle" className={scss.header}>
      <Col>户型图1</Col>
      <Col>
        <Button type="text">撤销</Button>
        <Button type="text">保存</Button>
        <Button type="text" onClick={showRightAside}>
          工具栏
        </Button>
      </Col>
    </Row>
  )
}

export default Header
